<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" 
	+ request.getServerPort() + path + "/";
%>
<html>
<head>
<base href="<%=basePath%>"/> <!-- 设置页面的基本路径，页面所有资源引入和页面跳转都济源bathPath -->

<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />

</head>
<body>
<article class="page-container">
	<!-- form的action中根据判断共享对象role是否为空，来指定表单提交的url -->
	<form class="form form-horizontal" action="${empty role ? 'role/insert.do' : 'role/update.do'}" method="post" id="roleForm">
		<!-- 在更新角色信息的环境下把roleId隐藏提交给后台 -->
		<input type="hidden" value="${role.roleId }" name="roleId" />
		<!-- 设置一个隐藏域用于提交权限id的数据 -->
		<input type="hidden" value="${role.permissionIds }" id="permissionIds" name="permissionIds"/>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>角色名：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<!-- 在更新角色信息的环境下锁定角色名信息，不能更改 -->
				<input type="text" class="input-text" ${role != null ? 'disabled' : '' } value="${role.rolename }" 
				placeholder="请输入角色名称" id="rolename" name="rolename">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>角色描述：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea id="remark" name="remark" class="textarea"  placeholder="请输入角色描述（50字以内）" >${role.remark }</textarea>
			</div>
		</div>
		
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>角色权限：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<ul id="permissionTree" class="ztree"></ul>
			</div>
		</div>
		
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script> 
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script> 
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.min.js"> </script> 
<script type="text/javascript" src="lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">

/* 使用jquery-validation技术进行表单提交前的校验 */
$().ready(function(){
	/* 在键盘按下并释放及表单提交时验证 */
	$("#roleForm").validate({
		// 校验规则
		rules:{
			rolename:{
				required:true,
				minlength:2,
				remote:{  // 通过异步验证来判断角色名是否重复，返回ture或false。达到局部刷新的效果
					url:"role/checkRolename.do",
					type:"post",
					dataType:"json",
					data:{
						rolename:function(){
							return $("#rolename").val();
						}
					}
				}
			},
			remark:{
				required:true,
				maxlength:50
			}
		},
		
		//错误提示
		messages:{
			rolename:{
				required:"角色名称不能为空",
				minlength:"角色名称至少2个字符",
				remote:"角色名称已经存在"
			},
			remark:{
				required:"角色描述不能为空",
				maxlength:"角色描述不能大于50个字符"
			}
		},
		
		/* 校验成功后的处理：
		 *		1. 函数中的form就是上面表单的原始DOM对象
		 * 		2. 原生对象-->Jquery对象：$(原生DOM对象)
		 * 		3. Jquery对象-->原生对象: Jquery对象[0]
		 * 
		 */
		submitHandler:function(form){
			// 1.获取zTree中选择的权限数据，将数据给到permissionIds
				/* 1.1 获取zTree对象：要注意这里不是id选择器，所以不要加# */
				var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
				/* 1.2 获取选中的节点，如果设置为false则表示获取未被选择的节点 */
				var selectedNodes = treeObj.getCheckedNodes(true);
				/* 1.3 循环所有节点，获取到每一个阶段的id，放在一个数组中 */
				/* 1.3.1 如果一个权限都没有分配，怎显示提示信息，并终止函数 */
				if(selectedNodes.length == 0){
					layer.msg("最少需要分配一个权限", {icon:2});
					return false;  //js中终止函数的方式
				}
				var permissionIds = new Array();
				for(var i = 0; i < selectedNodes.length; i++){
					permissionIds.push(selectedNodes[i].permissionId);
				}
				/* 1.4 将数组转成字符串，并打印调试。以下两种方法都可以 */
				var permissionIdsStr = permissionIds.toString();
				//var permissionIdsStr = permissionIds.join(",");
				/* 1.5 将角色权限字符串赋值给permissionIds */
				$("#permissionIds").val(permissionIdsStr);
			
			// 2.提交表单
			$(form).ajaxSubmit(function(respData){
				console.log(respData);
				// 添加完毕后的提示
				layer.msg(respData.msg,{icon:respData.code,time:1000},function(){
					// 添加成功后
					if(respData.code == 1){
						// 刷新父页面表格
						parent.refreshTable();
						// 通过父页面关闭模态窗口
						parent.layer.closeAll();
					}
				});
			});
		}
	});
});
</script>

<!-- 异步加载权限zTree数据 -->
<script type="text/javascript">
	/* zTree的设置对象 */
	var setting = {
		data:{
			/* 设置支持简单json格式数据 */
			simpleData:{
				enable:true,
				idKey: "permissionId",  /* zTree数据的id名称 */
				pIdKey: "parentId"  /* zTree数据的父id名称 */
			}
		},
		/* 设置是否支持复选框 */
		check: {
			enable: true
		},
		/* 异步加载数据 */
		async: {
			enable: true,
			url: "permission/getAllPermission.do",
			/* 预处理zTree数据 */
			dataFilter: ajaxDataFilter
		},
		/* 异步加载数据成功后回调的函数 */
		callback: {
			onAsyncSuccess: zTreeOnAsyncSuccess
		}
	}
	
	/* 异步加载数据成功后回调的函数:目前这几个形参都没有用 */
	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		// 0.获取zTree对象
		var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
		// 1.获取到角色的所有权限id组成的字符串，"${role.permissionIds}"这里要用""包裹起来表示字符串
	    var permissionIds = "${role.permissionIds}";
		// 2.将字符串分割成字符串数组
	    var permissionIdsArr = permissionIds.split(",");
		// 3.遍历数组，获取每一个permissionId，再通过permissionId获取到每一个节点对象
		for(var i = 0; i < permissionIdsArr.length; i++){
			
			// 4.通过permissionId这个属性去获取阶段对象
			// var node = treeObj.getNodeByParam("用来索引的属性名称", 需要索引的属性值, null代表没有结果时返回null);
			var node = treeObj.getNodeByParam("permissionId", permissionIdsArr[i], null);
			
			console.log(node);  //打印调试
			// 5.让被遍历到的节点被选中
			// 		第一个boolean类型表示是否选中当前节点，我们这里选择true
			// 		第二个boolean类型表示是否进行父子节点的联动勾选操作，我们这里选择false 
			if(node != null){
				treeObj.checkNode(node, true, false);
			}
		}
	};
	
	/* 预处理zTree数据的函数 */
	/*
	 * treeId: 对应zTree的id
	 * parentNode: 进行异步加载的父节点 JSON 数据对象
	 * responseData: 异步加载获取到的数据转换后的 Array(JSON) / JSON / String 数据对象
	 */
	function ajaxDataFilter(treeId, parentNode, responseData) {
		if (responseData) {
			for (var i = 0; i < responseData.length; i++) {
				/* 给每个节点数据添加一个open:true属性，达到将所有数据展开的效果 */
				responseData[i].open = true; 
				/* 禁用url */
				responseData[i].url = null;
			}
		}
		console.log(responseData);  //打印调试
		return responseData;
	};

	/* 初始化zTree */
	$(function() {
		$.fn.zTree.init($("#permissionTree"), setting);
	});
	
</script>

<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
